<template>
  <div >
    <div class="message" v-show="items.length > 0"  @click="handleClick">
      <seamless-scroll :data="items" class="seamless-scroll" :class-option="defaultOption">
        <div class="message-item" v-for="item in items" >
          <svg-icon icon-class="msg" style="font-size:24px;margin-right: 10px"></svg-icon>
          <span class="massage-content">{{item.content}}</span>
          <span class="massage-time">{{item.sendTime}}</span>
        </div>
      </seamless-scroll>
    </div>
    <el-dialog
      title="事项提醒"
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="1000">
      <el-link type="danger">事项提醒，请重点跟进相关事宜，以保证业务顺利衔接！</el-link>
      <el-table :data="items" >
        <el-table-column label="消息类型" width="180" align="center" prop="contractCode" >
          <template slot-scope="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <span v-show="scope.row.isRead == 0" style="display: flex;width: 8px;height: 8px;border-radius: 12px;background: red;margin-right: 5px"></span>
              <span><dict-tag :options="dict.type.sys_message_type" :value="scope.row.messageType"/></span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="消息内容" show-overflow-tooltip align="center" prop="content" />
        <el-table-column label="发件人" width="180px" align="center" prop="senderName" />
        <el-table-column label="发送时间" width="180" align="center" prop="sendTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.sendTime, '{y}-{m}-{d} {hh}:{mm}:{s}') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" :disabled="times > 0" @click="closeIt"><span v-if="times > 0">({{times}}s)后可</span>关闭</el-button>
  </span>
    </el-dialog>
  </div>



</template>

<script>
import {listMessage} from '@/api/business/message'
import SeamlessScroll from 'vue-seamless-scroll'; // 引入组件
export default {
  components: {
    SeamlessScroll
  },
  dicts: ['sys_message_type'],
  name: "message",
  data() {
    return {
      dialogVisible: false,
      timer: null,
      times: 10,
      items: [],
      socketUrl: '',
    }
  },
  created() {
    this.getMsgList()

  },
  mounted() {
    this.bus.$on('message', (data) => {
      this.items = data
    })

  },
  methods: {
    handleClick() {
      this.$router.push('/message')
    },
    getMsgList() {
      listMessage({  pageNum: 1,
        pageSize: 10000,isRead: 0}).then(r => {
        this.items = r.rows
        if(this.items .length > 0) {
          this.dialogVisible = (true && !sessionStorage.getItem('isReadMsgAlertFlag'))
          this.timer = setInterval(() => {
            this.times--
            if(this.times == 0) {
              clearInterval(this.timer)
            }
          }, 1000)
        }
      })
    },
    closeIt() {
      this.dialogVisible = false
      sessionStorage.setItem('isReadMsgAlertFlag', true)
    }
  },
  beforeDestroy() {
  },
  computed: {
    defaultOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量，根据dataList.length设置
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下，1向上，2向左，3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度（默认值0是无缝不停止的滚动），direction=>0/1
        singleWidth: 0, // 单步运动停止的宽度（默认值0是无缝不停止的滚动），direction=>2/3
        waitTime: 1000 // 单步运动停止的时间（默认值1000ms）

      }
    }
  }
}
</script>

<style scoped lang="scss">
.message {
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  background-color: rgb(254, 240, 240);
  color: rgb(245, 108, 108);
  border-radius: 20px;
  padding: 10px 20px;
  overflow: hidden;
  .message-item {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .massage-content {
      width: calc(100% - 190px);
    }
  }
}
</style>
